<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: dark)"><meta name="generator" content="Hexo 6.3.0">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,700,700italic%7CZCOOL+QingKe+HuangYou:300,300italic,400,400italic,700,700italic%7CNoto+Sans+Simplified+Chinese:300,300italic,400,400italic,700,700italic%7CJetBrains+Mono:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">

<link rel="stylesheet" href="/lib/@fortawesome/fontawesome-free/css/all.min.css" integrity="sha256-HtsXJanqjKTc8vVQjO4YMhiqFoXkfBsjBWcX91T1jr8=" crossorigin="anonymous">
  <link rel="stylesheet" href="/lib/animate.css/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">
  <link rel="stylesheet" href="/lib/@fancyapps/ui/dist/fancybox/fancybox.css" integrity="sha256-RvRHGSuWAxZpXKV9lLDt2e+rZ+btzn48Wp4ueS3NZKs=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"wyatex.online","root":"/","images":"/images","scheme":"Pisces","darkmode":true,"version":"8.18.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":{"enable":true,"style":"mac"},"fold":{"enable":false,"height":500},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":true,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":true,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":true}}</script><script src="/js/config.js"></script>

    <meta name="description" content="MDN：XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。">
<meta property="og:type" content="article">
<meta property="og:title" content="Ajax学习笔记：XMLHttpRequest">
<meta property="og:url" content="https://wyatex.online/%E5%89%8D%E7%AB%AF/Ajax%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%9AXMLHttpRequest/index.html">
<meta property="og:site_name" content="Wyatex&#96;s blog">
<meta property="og:description" content="MDN：XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-11-12T12:33:06.000Z">
<meta property="article:modified_time" content="2023-05-05T01:25:46.902Z">
<meta property="article:author" content="Wyatex">
<meta property="article:tag" content="JavaScript">
<meta property="article:tag" content="前端">
<meta property="article:tag" content="学习笔记">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="https://wyatex.online/%E5%89%8D%E7%AB%AF/Ajax%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%9AXMLHttpRequest/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"https://wyatex.online/%E5%89%8D%E7%AB%AF/Ajax%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%9AXMLHttpRequest/","path":"前端/Ajax学习笔记：XMLHttpRequest/","title":"Ajax学习笔记：XMLHttpRequest"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>Ajax学习笔记：XMLHttpRequest | Wyatex`s blog</title>
  








  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <div class="column">
      <header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">Wyatex`s blog</p>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger" aria-label="搜索" role="button">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签<span class="badge">97</span></a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类<span class="badge">26</span></a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档<span class="badge">155</span></a></li><li class="menu-item menu-item-编程"><a href="/programming/" rel="section"><i class="fa fa-book fa-fw"></i>编程</a></li><li class="menu-item menu-item-蹲坑读物"><a href="/%E5%B9%B2%E8%B4%A7/%E5%BC%80%E5%8F%91%E4%BA%A4%E6%B5%81%E7%BE%A4%E5%88%86%E4%BA%AB%E8%AE%B0%E5%BD%95/" rel="section"><i class="fa fa-book fa-fw"></i>蹲坑读物</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close" role="button">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container no-result">
  <div class="search-result-icon">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</header>
        
  
  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0"><span class="nav-number">1.</span> <span class="nav-text">构造函数</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%B1%9E%E6%80%A7"><span class="nav-number">2.</span> <span class="nav-text">属性</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#XMLHttpRequest-readyState"><span class="nav-number">2.1.</span> <span class="nav-text">XMLHttpRequest.readyState</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#XMLHttpRequest-onreadystatechange"><span class="nav-number">2.2.</span> <span class="nav-text">XMLHttpRequest.onreadystatechange</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#XMLHttpRequest-status"><span class="nav-number">2.3.</span> <span class="nav-text">XMLHttpRequest.status</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#XMLHttpRequest-statusText"><span class="nav-number">2.4.</span> <span class="nav-text">XMLHttpRequest.statusText</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#XMLHttpRequest-upload"><span class="nav-number">2.5.</span> <span class="nav-text">XMLHttpRequest.upload</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#XMLHttpRequest-timeout"><span class="nav-number">2.6.</span> <span class="nav-text">XMLHttpRequest.timeout</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%80%E4%BA%9Bresponse%E5%B1%9E%E6%80%A7"><span class="nav-number">2.7.</span> <span class="nav-text">一些response属性</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%96%B9%E6%B3%95"><span class="nav-number">3.</span> <span class="nav-text">方法</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8%E6%A1%88%E4%BE%8B"><span class="nav-number">4.</span> <span class="nav-text">使用案例</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AE%80%E5%8D%95%E7%9A%84GET"><span class="nav-number">4.1.</span> <span class="nav-text">简单的GET</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AE%80%E5%8D%95%E7%9A%84POST"><span class="nav-number">4.2.</span> <span class="nav-text">简单的POST</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BC%A0FormData"><span class="nav-number">4.3.</span> <span class="nav-text">传FormData</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6"><span class="nav-number">4.4.</span> <span class="nav-text">上传文件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%BF%9B%E5%BA%A6%E4%BF%A1%E6%81%AF"><span class="nav-number">4.5.</span> <span class="nav-text">进度信息</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#XHR%E5%AE%9A%E6%97%B6%E8%BD%AE%E8%AF%A2%E5%92%8C%E9%95%BF%E8%BD%AE%E8%AF%A2"><span class="nav-number">5.</span> <span class="nav-text">XHR定时轮询和长轮询</span></a></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="Wyatex"
      src="/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">Wyatex</p>
  <div class="site-description" itemprop="description">这里是我用来做笔记的网站哟~</div>
</div>
<div class="site-state-wrap animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">155</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">26</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">97</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author animated">
      <span class="links-of-author-item">
        <a href="https://github.com/wyatex" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;wyatex" rel="noopener me" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:wyatex@qq.com" title="E-Mail → mailto:wyatex@qq.com" rel="noopener me" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
      </span>
  </div>

        </div>
      </div>
    </div>

    
    <div class="sidebar-inner sidebar-blogroll">
      <div class="links-of-blogroll animated">
        <div class="links-of-blogroll-title"><i class="fa fa-globe fa-fw"></i>
          链接
        </div>
        <ul class="links-of-blogroll-list">
            <li class="links-of-blogroll-item">
              <a href="https://antfu.me/" title="https:&#x2F;&#x2F;antfu.me&#x2F;" rel="noopener" target="_blank">Anthony Fu</a>
            </li>
            <li class="links-of-blogroll-item">
              <a href="https://www.codesky.me/" title="https:&#x2F;&#x2F;www.codesky.me&#x2F;" rel="noopener" target="_blank">CodeSky</a>
            </li>
            <li class="links-of-blogroll-item">
              <a href="https://learn.lianglianglee.com/" title="https:&#x2F;&#x2F;learn.lianglianglee.com&#x2F;" rel="noopener" target="_blank">技术文章摘抄</a>
            </li>
        </ul>
      </div>
    </div>
        <div class="pjax">
        <div class="sidebar-inner sidebar-post-related">
          <div class="animated">
              <div class="links-of-blogroll-title"><i class="fa fa-signs-post fa-fw"></i>
    相关文章
  </div>
  <ul class="popular-posts">
    <li class="popular-posts-item">
      <a class="popular-posts-link" href="/%E5%89%8D%E7%AB%AF/Ajax%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%9A%E5%B0%81%E8%A3%85XHR/" rel="bookmark">
        <time class="popular-posts-time">2020-11-13</time>
        <br>
      Ajax学习笔记：封装XHR
      </a>
    </li>
    <li class="popular-posts-item">
      <a class="popular-posts-link" href="/%E5%89%8D%E7%AB%AF/Ajax%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%881%EF%BC%89%EF%BC%9AAxios%E5%85%A5%E9%97%A8/" rel="bookmark">
        <time class="popular-posts-time">2021-09-20</time>
        <br>
      Ajax学习笔记（1）：Axios入门
      </a>
    </li>
  </ul>

          </div>
        </div>
        </div>
  </aside>


    </div>

    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://wyatex.online/%E5%89%8D%E7%AB%AF/Ajax%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%9AXMLHttpRequest/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="Wyatex">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Wyatex`s blog">
      <meta itemprop="description" content="这里是我用来做笔记的网站哟~">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="Ajax学习笔记：XMLHttpRequest | Wyatex`s blog">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          Ajax学习笔记：XMLHttpRequest
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-11-12 20:33:06" itemprop="dateCreated datePublished" datetime="2020-11-12T20:33:06+08:00">2020-11-12</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2023-05-05 09:25:46" itemprop="dateModified" datetime="2023-05-05T09:25:46+08:00">2023-05-05</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span></a>
        </span>
    </span>

  
    <span class="post-meta-item" title="阅读次数" id="busuanzi_container_page_pv">
      <span class="post-meta-item-icon">
        <i class="far fa-eye"></i>
      </span>
      <span class="post-meta-item-text">阅读次数：</span>
      <span id="busuanzi_value_page_pv"></span>
    </span>
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody"><blockquote>
<p>MDN：<code>XMLHttpRequest</code>（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。</p>
</blockquote>
<span id="more"></span>

<blockquote>
<p>本文内容大部分来至：<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest">MDN</a> 、<a target="_blank" rel="noopener" href="https://juejin.im/post/6844903472714743816">你不知道的 XMLHttpRequest</a></p>
</blockquote>
<p>尽管名称叫这个，但是 <code>XMLHttpRequest</code> 可以用于获取任何类型的数据。它甚至支持 HTTP 以外的协议（包括 file:&#x2F;&#x2F; 和 FTP），尽管可能受到更多出于安全等原因的限制。</p>
<p>但是如果只是需要单纯从服务器端接收事件或消息数据，应该通过 <code>EventSource</code> 接口使用 <code>Server-sent events</code> ，如果是全双工通信应该使用 <code>WebSocket</code>, 使用方法在这章简述：<a href="/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/Html5%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-1/#WebSocket">Html5学习笔记</a></p>
<h1 id="构造函数"><a href="#构造函数" class="headerlink" title="构造函数"></a>构造函数</h1><p>通过 <code>XMLHttpRequest()</code> 方法可以得到一个该对象</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> request = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>();</span><br></pre></td></tr></table></figure>
<p>在调用下列任何其他方法之前，必须先调用该构造函数，或通过其他方式，得到一个实例对象。</p>
<h1 id="属性"><a href="#属性" class="headerlink" title="属性"></a>属性</h1><p>此接口继承了 <code>XMLHttpRequestEventTarget</code> 和 <code>EventTarget</code> 的属性。</p>
<h2 id="XMLHttpRequest-readyState"><a href="#XMLHttpRequest-readyState" class="headerlink" title="XMLHttpRequest.readyState"></a>XMLHttpRequest.readyState</h2><p><strong>该属性为只读</strong></p>
<p>XMLHttpRequest.readyState 属性返回一个 XMLHttpRequest  代理当前所处的状态。一个 XHR 代理总是处于下列状态中的一个：</p>
<table>
<thead>
<tr>
<th>值</th>
<th>状态</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td><code>0</code></td>
<td><code>UNSENT</code></td>
<td>代理被创建，但尚未调用 open() 方法。</td>
</tr>
<tr>
<td><code>1</code></td>
<td><code>OPENED</code></td>
<td><code>open()</code> 方法已经被调用。</td>
</tr>
<tr>
<td><code>2</code></td>
<td><code>HEADERS_RECEIVED</code></td>
<td><code>send()</code> 方法已经被调用，并且头部和状态已经可获得。</td>
</tr>
<tr>
<td><code>3</code></td>
<td><code>LOADING</code></td>
<td>下载中； responseText 属性已经包含部分数据。</td>
</tr>
<tr>
<td><code>4</code></td>
<td><code>DONE</code></td>
<td>下载操作已完成。</td>
</tr>
</tbody></table>
<p><strong>OPENED</strong> ： 在这个状态中，可以通过 <code>setRequestHeader()</code> 方法来设置请求的头部， 可以调用 <code>send()</code> 方法来发起请求。</p>
<p><strong>LOADING</strong>： 响应体部分正在被接收。如果 responseType 属性是“text”或空字符串， responseText 将会在载入的过程中拥有部分响应数据。</p>
<p><strong>DONE</strong>： 请求操作已经完成。这意味着数据传输已经彻底完成或失败。</p>
<blockquote>
<p>在IE中，状态有着不同的名称，并不是 <code>UNSENT</code>，<code>OPENED</code> ， <code>HEADERS_RECEIVED</code> ， <code>LOADING</code> 和 <code>DONE</code>, 而是 <code>READYSTATE_UNINITIALIZED</code> (0)，<code>READYSTATE_LOADING</code> (1) ， <code>READYSTATE_LOADED</code> (2) ， <code>READYSTATE_INTERACTIVE</code> (3) 和 <code>READYSTATE_COMPLETE</code> (4) 。</p>
</blockquote>
<p>实例</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> xhr = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;UNSENT&#x27;</span>, xhr.<span class="property">readyState</span>); <span class="comment">// readyState 为 0</span></span><br><span class="line"></span><br><span class="line">xhr.<span class="title function_">open</span>(<span class="string">&#x27;GET&#x27;</span>, <span class="string">&#x27;/api&#x27;</span>, <span class="literal">true</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;OPENED&#x27;</span>, xhr.<span class="property">readyState</span>); <span class="comment">// readyState 为 1</span></span><br><span class="line"></span><br><span class="line">xhr.<span class="property">onprogress</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;LOADING&#x27;</span>, xhr.<span class="property">readyState</span>); <span class="comment">// readyState 为 3</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">xhr.<span class="property">onload</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;DONE&#x27;</span>, xhr.<span class="property">readyState</span>); <span class="comment">// readyState 为 4</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">xhr.<span class="title function_">send</span>(<span class="literal">null</span>);</span><br></pre></td></tr></table></figure>

<h2 id="XMLHttpRequest-onreadystatechange"><a href="#XMLHttpRequest-onreadystatechange" class="headerlink" title="XMLHttpRequest.onreadystatechange"></a>XMLHttpRequest.onreadystatechange</h2><p>该属性是一个方法，当 readyState 属性改变时会调用它</p>
<h2 id="XMLHttpRequest-status"><a href="#XMLHttpRequest-status" class="headerlink" title="XMLHttpRequest.status"></a>XMLHttpRequest.status</h2><p>返回一个无符号短整型（unsigned short）数字，代表请求的响应状态。</p>
<h2 id="XMLHttpRequest-statusText"><a href="#XMLHttpRequest-statusText" class="headerlink" title="XMLHttpRequest.statusText"></a>XMLHttpRequest.statusText</h2><p>只读属性 <code>XMLHttpRequest.statusText</code> 返回了 <code>XMLHttpRequest</code> 请求中由服务器返回的一个 <code>DOMString</code> 类型的文本信息，这则信息中也包含了响应的数字状态码。不同于使用一个数字来指示的状态码 <code>XMLHTTPRequest.status</code> ，这个属性包含了返回状态对应的文本信息，例如”OK”或是”Not Found”。如果请求的状态 <code>readyState</code> 的值为”UNSENT”或者”OPENED”，则这个属性的值将会是一个空字符串。<br>如果服务器未明确指定一个状态文本信息，则<code>statusText</code>的值将会被自动赋值为”OK”。</p>
<h2 id="XMLHttpRequest-upload"><a href="#XMLHttpRequest-upload" class="headerlink" title="XMLHttpRequest.upload"></a>XMLHttpRequest.upload</h2><p><strong>该属性为只读</strong></p>
<p><code>XMLHttpRequest.upload</code> 属性返回一个 <code>XMLHttpRequestUpload</code> 对象，用来表示上传的进度。这个对象是不透明的，但是作为一个 <code>XMLHttpRequestEventTarget</code> ，可以通过对其绑定事件来追踪它的进度。</p>
<p>可以被绑定在upload对象上的事件监听器如下:</p>
<ol>
<li>onloadstart: 获取开始</li>
<li>onprogress: 数据传输进行中</li>
<li>onabort: 获取操作终止</li>
<li>onerror: 获取失败</li>
<li>onload: 获取成功</li>
<li>ontimeout: 获取操作在用户规定的时间内未完成</li>
<li>onloadend: 获取完成（不论成功与否）</li>
</ol>
<h2 id="XMLHttpRequest-timeout"><a href="#XMLHttpRequest-timeout" class="headerlink" title="XMLHttpRequest.timeout"></a>XMLHttpRequest.timeout</h2><p><code>XMLHttpRequest.timeout</code> 是一个无符号长整型数，代表着一个请求在被自动终止前所消耗的毫秒数。默认值为 0，意味着没有超时。超时并不应该用在一个 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Glossary/document_environment">document environment</a> 中的同步 XMLHttpRequests  请求中，否则将会抛出一个 <code>InvalidAccessError</code> 类型的错误。当超时发生， <code>timeout</code> 事件将会被触发。</p>
<h2 id="一些response属性"><a href="#一些response属性" class="headerlink" title="一些response属性"></a>一些response属性</h2><p><code>XMLHttpRequest.response</code> ：响应体的类型由 <code>responseType</code> 来指定，可以是 <code>ArrayBuffer、Blob、Document、JSON</code>，或者是字符串。如果请求未完成或失败，则该值为 null。<strong>该属性为只读</strong></p>
<p><code>XMLHttpRequest.responseText</code> ：返回一个 <code>DOMString</code>，该 <code>DOMString</code> 包含对请求的响应，如果请求未成功或尚未发送，则返回 <code>null</code>。<strong>该属性为只读</strong></p>
<p><code>XMLHttpRequest.responseType</code> ：一个用于定义响应类型的枚举值（enumerated value）。responseType支持以下几种值：</p>
<ul>
<li><code>&quot;&quot;</code> :<code>responseType</code> 为空字符串时，采用默认类型 DOMString，与设置为 text 相同。</li>
<li><code>arraybuffer</code> :<code>response</code> 是一个包含二进制数据的 JavaScript <code>ArrayBuffer</code>。</li>
<li><code>blob</code> : <code>response</code> 是一个包含二进制数据的 Blob 对象 。</li>
<li><code>document</code> :<code>response</code> 是一个 <code>HTML Document</code> 或 <code>XML XMLDocument</code>，这取决于接收到的数据的 <code>MIME</code> 类型。</li>
<li><code>json</code> : <code>response</code> 是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为 JSON 解析得到的。</li>
<li><code>text</code> : <code>response</code> 是一个以 <code>DOMString</code> 对象表示的文本。</li>
</ul>
<h1 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h1><p>包括下面方法：</p>
<ol>
<li><code>XMLHttpRequest.open()</code> ：初始化一个请求。</li>
<li><code>XMLHttpRequest.send()</code> ：发送请求。如果请求是异步的（默认），那么该方法将在请求发送后立即返回。</li>
<li><code>XMLHttpRequest.abort()</code> ：如果请求已经被发送，则立刻中止请求。</li>
<li><code>XMLHttpRequest.getAllResponseHeaders()</code> ：返回所有响应头信息(响应头名和值)，如果响应头还没有接收，则返回 null。<strong>注意：使用该方法获取的 response headers 与在开发者工具 Network 面板中看到的响应头不一致</strong></li>
<li><code>XMLHttpRequest.overrideMimeType()</code> ：重写由服务器返回的 MIME 类型。例如，可以用于强制把响应流当做 text&#x2F;xml 来解析，即使服务器没有指明数据是这个类型。<strong>注意：这个方法必须在 send() 之前被调用。</strong></li>
<li><code>XMLHttpRequest.setRequestHeader()</code> ：设置 HTTP 请求头信息。<strong>注意：在这之前，你必须确认已经调用了 open() 方法打开了一个 url</strong></li>
</ol>
<p>open() 方法签名：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">void open(</span><br><span class="line">   DOMString method,                //请求所使用的 HTTP 方法，如 GET、POST、PUT、DELETE</span><br><span class="line">   DOMString url,                   //请求的 URL 地址</span><br><span class="line">   optional boolean async,          //一个可选的布尔值参数，默认值为 true，表示执行异步操作。如果值为 false，则 send() 方法不会返回任何东西，直到接收到了服务器的返回数据</span><br><span class="line">   optional DOMString user,         //用户名，可选参数，用于授权。默认参数为空字符串</span><br><span class="line">   optional DOMString password      //密码，可选参数，用于授权。默认参数为空字符串</span><br><span class="line">)   </span><br></pre></td></tr></table></figure>

<p>send() 方法签名:</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">void send();</span><br><span class="line">void send(ArrayBuffer data);</span><br><span class="line">void send(Blob data);</span><br><span class="line">void send(Document data);</span><br><span class="line">void send(DOMString? data);</span><br><span class="line">void send(FormData data);</span><br></pre></td></tr></table></figure>
<p>如果发送的数据是Document对象，需要在发送之前将其序列化。</p>
<p>发送二进制内容的最佳方法（如上传文件）是使用一个与send()方法结合的 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/ArrayBufferView">ArrayBufferView</a> 或者 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/Blob">Blobs</a></p>
<h1 id="使用案例"><a href="#使用案例" class="headerlink" title="使用案例"></a>使用案例</h1><h2 id="简单的GET"><a href="#简单的GET" class="headerlink" title="简单的GET"></a>简单的GET</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> xhr = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>();</span><br><span class="line">xhr.<span class="title function_">open</span>(<span class="string">&#x27;GET&#x27;</span>, <span class="string">&#x27;/server&#x27;</span>, <span class="literal">true</span>);</span><br><span class="line"></span><br><span class="line">xhr.<span class="property">onload</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">   <span class="comment">// 请求结束后,在此处写处理代码</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">xhr.<span class="title function_">send</span>(<span class="literal">null</span>);</span><br><span class="line"><span class="comment">// xhr.send(&#x27;string&#x27;);</span></span><br><span class="line"><span class="comment">// xhr.send(new Blob());</span></span><br><span class="line"><span class="comment">// xhr.send(new Int8Array());</span></span><br><span class="line"><span class="comment">// xhr.send(&#123; form: &#x27;data&#x27; &#125;);</span></span><br><span class="line"><span class="comment">// xhr.send(document);</span></span><br></pre></td></tr></table></figure>

<h2 id="简单的POST"><a href="#简单的POST" class="headerlink" title="简单的POST"></a>简单的POST</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> xhr = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>();</span><br><span class="line">xhr.<span class="title function_">open</span>(<span class="string">&quot;POST&quot;</span>, <span class="string">&#x27;/server&#x27;</span>, <span class="literal">true</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//发送合适的请求头信息</span></span><br><span class="line">xhr.<span class="title function_">setRequestHeader</span>(<span class="string">&quot;Content-type&quot;</span>, <span class="string">&quot;application/x-www-form-urlencoded&quot;</span>);</span><br><span class="line"></span><br><span class="line">xhr.<span class="property">onload</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123; </span><br><span class="line">    <span class="comment">// 请求结束后,在此处写处理代码 </span></span><br><span class="line">&#125;;</span><br><span class="line">xhr.<span class="title function_">send</span>(<span class="string">&quot;foo=bar&amp;lorem=ipsum&quot;</span>); </span><br><span class="line"><span class="comment">// xhr.send(&#x27;string&#x27;); </span></span><br><span class="line"><span class="comment">// xhr.send(new Blob()); </span></span><br><span class="line"><span class="comment">// xhr.send(new Int8Array()); </span></span><br><span class="line"><span class="comment">// xhr.send(&#123; form: &#x27;data&#x27; &#125;); </span></span><br><span class="line"><span class="comment">// xhr.send(document);</span></span><br></pre></td></tr></table></figure>

<h2 id="传FormData"><a href="#传FormData" class="headerlink" title="传FormData"></a>传FormData</h2><p>为了方便表单数据，HTML 5新增了一个 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/FormData">FormData</a> 对象，可以用于模拟表单。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//首先新建一个 FormData 对象</span></span><br><span class="line"><span class="keyword">var</span> formData = <span class="keyword">new</span> <span class="title class_">FormData</span>()</span><br><span class="line"><span class="comment">//然后，为它添加表单项</span></span><br><span class="line">formData.<span class="title function_">append</span>(<span class="string">&#x27;username&#x27;</span>, <span class="string">&#x27;wyatex&#x27;</span>)</span><br><span class="line">formData.<span class="title function_">append</span>(<span class="string">&#x27;password&#x27;</span>, <span class="string">&#x27;123456&#x27;</span>)</span><br><span class="line">formData.<span class="title function_">append</span>(<span class="string">&#x27;id&#x27;</span>, <span class="number">123</span>)</span><br><span class="line"><span class="comment">//最后，直接传送这个FormData对象。这与提交网页表单的效果，完全一样。</span></span><br><span class="line">xhr.<span class="title function_">send</span>(formData)</span><br></pre></td></tr></table></figure>
<p>FormData 对象也可以用来获取网页表单的值</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">var form = document.getElementById(&#x27;myform&#x27;);   // 获取页面上表单对象</span><br><span class="line">var formData = new FormData(form);</span><br><span class="line">formData.append(&#x27;role&#x27;, &#x27;user&#x27;);                // 添加一个表单项</span><br><span class="line">xhr.send(formData);</span><br></pre></td></tr></table></figure>

<h2 id="上传文件"><a href="#上传文件" class="headerlink" title="上传文件"></a>上传文件</h2><p>为了上传文件, 我们得先选中一个文件. 一个 <code>type</code> 为 <code>file</code> 的 <code>input</code> 输入框</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;input id=<span class="string">&quot;input&quot;</span> type=<span class="string">&quot;file&quot;</span>&gt;</span><br></pre></td></tr></table></figure>
<p>然后用 FormData 对象包裹选中的文件</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> input = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;input&quot;</span>),</span><br><span class="line">formData = <span class="keyword">new</span> <span class="title class_">FormData</span>();</span><br><span class="line">formData.<span class="title function_">append</span>(<span class="string">&quot;file&quot;</span>,input.<span class="property">files</span>[<span class="number">0</span>]); <span class="comment">// file名称与后台接收的名称一致</span></span><br><span class="line"><span class="comment">//设置上传地址和请求方法(使用POST方法)，最后发送 `FormData` 对象</span></span><br><span class="line">xhr.<span class="title function_">send</span>(formData);</span><br></pre></td></tr></table></figure>

<h2 id="进度信息"><a href="#进度信息" class="headerlink" title="进度信息"></a>进度信息</h2><p>新版本的 XMLHttpRequest 对象，传送数据的时候，有一个 progress 事件，用来返回进度信息。</p>
<p>它分成上传和下载两种情况。下载的 progress 事件属于 XMLHttpRequest 对象，上传的 progress 事件属于XMLHttpRequest.upload 对象。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">xhr.<span class="property">onprogress</span> = <span class="keyword">function</span>(<span class="params">e</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (e.<span class="property">lengthComputable</span>) &#123;</span><br><span class="line">        <span class="keyword">let</span> precent = e.<span class="property">loaded</span> / e.<span class="property">total</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">xhr.<span class="property">upload</span>.<span class="property">onprogress</span> = xhr.<span class="property">onprogress</span></span><br></pre></td></tr></table></figure>
<p>其中total是需要传输的总字节，loaded是已经传输的字节。如果event.lengthComputable 不为真，则 event.total 等于0。</p>
<h1 id="XHR定时轮询和长轮询"><a href="#XHR定时轮询和长轮询" class="headerlink" title="XHR定时轮询和长轮询"></a>XHR定时轮询和长轮询</h1><p>感觉这部分不怎么需要，到时候需要再写</p>

    </div>

    
    
    

    <footer class="post-footer">
          

<div class="post-copyright">
<ul>
  <li class="post-copyright-author">
      <strong>本文作者： </strong>Wyatex
  </li>
  <li class="post-copyright-link">
      <strong>本文链接：</strong>
      <a href="https://wyatex.online/%E5%89%8D%E7%AB%AF/Ajax%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%9AXMLHttpRequest/" title="Ajax学习笔记：XMLHttpRequest">https://wyatex.online/前端/Ajax学习笔记：XMLHttpRequest/</a>
  </li>
  <li class="post-copyright-license">
      <strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="noopener" target="_blank"><i class="fab fa-fw fa-creative-commons"></i>BY-NC-SA</a> 许可协议。转载请注明出处！
  </li>
</ul>
</div>

          <div class="post-tags">
              <a href="/tags/JavaScript/" rel="tag"># JavaScript</a>
              <a href="/tags/%E5%89%8D%E7%AB%AF/" rel="tag"># 前端</a>
              <a href="/tags/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/" rel="tag"># 学习笔记</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/%E5%89%8D%E7%AB%AF/js%E7%AC%94%E8%AE%B0%EF%BC%9APromise/" rel="prev" title="js笔记：Promise">
                  <i class="fa fa-angle-left"></i> js笔记：Promise
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/%E5%89%8D%E7%AB%AF/Ajax%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%9A%E5%B0%81%E8%A3%85XHR/" rel="next" title="Ajax学习笔记：封装XHR">
                  Ajax学习笔记：封装XHR <i class="fa fa-angle-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">

  <div class="copyright">
    &copy; 2019 – 
    <span itemprop="copyrightYear">2024</span>
    <span class="with-love">
      <i class="fa fa-heart"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">Wyatex</span>
  </div>
<div class="busuanzi-count">
    <span class="post-meta-item" id="busuanzi_container_site_uv">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-item" id="busuanzi_container_site_pv">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>

    </div>
  </footer>

  
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up fa-lg"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


  
  <script size="300" alpha="0.6" zIndex="-1" src="/lib/ribbon.js/dist/ribbon.min.js"></script>
  <script src="/lib/animejs/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
  <script src="/lib/@next-theme/pjax/pjax.min.js" integrity="sha256-vxLn1tSKWD4dqbMRyv940UYw4sXgMtYcK6reefzZrao=" crossorigin="anonymous"></script>
  <script src="/lib/@fancyapps/ui/dist/fancybox/fancybox.umd.js" integrity="sha256-q8XkJ6dj5VwSvzI8+nATCHHQG+Xv/dAZBCgqmu93zOY=" crossorigin="anonymous"></script>
  <script src="/lib/lozad/dist/lozad.min.js" integrity="sha256-mOFREFhqmHeQbXpK2lp4nA3qooVgACfh88fpJftLBbc=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script><script src="/js/pjax.js"></script>

  <script src="/lib/hexo-generator-searchdb/dist/search.js" integrity="sha256-1kfA5uHPf65M5cphT2dvymhkuyHPQp5A53EGZOnOLmc=" crossorigin="anonymous"></script>
<script src="/js/third-party/search/local-search.js"></script>




  <script src="/js/third-party/fancybox.js"></script>



  
  <script data-pjax async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>





</body>
</html>
